<!-- 我的弹窗 -->

<template>
  <WebModal small>
    <WebForm>
      <FormInput label="群组名称" bind="groupName" :max="20" required />

      <FormTextarea label="群组描述" bind="description" :max="100" />

      <FormTreeMulti
        :label="`关联${CORE.MAP.REGION}`"
        bind="areaId"
        :dict="CORE.REGION.DICT"
        allName
        required
        @change="changeArea"
      />

      <MyMember />

      <MyPrincipal />
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换区域
     */
    changeArea(idList) {
      this.one.areaContent = idList.map((id) => {
        const area = CORE.REGION.MAP[id] || {}
        return { areaId: area.id, areaName: area.name }
      })
    },
  },
}
</script>
